
<template>
<el-row>
    <el-col :span="24">
        <el-breadcrumb style="margin-bottom: 10px;" separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">表格演示</a></el-breadcrumb-item>
        </el-breadcrumb>
    </el-col>
    <el-row  style="width: 100%;padding-left: 0 !important; display: flex;flex-direction: row; justify-content: space-between;">
        <el-col :span="12">
            <el-button type="success" icon="el-icon-refresh" size="mini">刷新</el-button>
            <el-button type="warning" icon="el-icon-plus" size="mini">添加</el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini">删除</el-button>
            <el-button type="primary" icon="el-icon-upload" size="mini">导入</el-button>
        </el-col>
        <el-col :span="12" >
            
        </el-col>
    </el-row>
    
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%;margin-top: 15px;"
    :row-style="{height:'20px'}"
    :cell-style="{padding:'2px 0'}"
    :header-cell-style="{background:'#f4f4f5'}"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
	prop="date"
	sortable=""
      label="日期"
      width="120">
      <template #default="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>
    </el-table-column>
	<el-table-column label="操作"
	width="150"
	>
      <template #default="scope">
          <el-tooltip class="item" effect="dark" content="修改" placement="bottom">
            <el-button @click="handleEdit(scope.$index, scope.row)" type="text" icon="el-icon-edit">修改</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="删除" placement="bottom">
            <el-button @click="handleDelete(scope.$index, scope.row)" type="text" style="color: #f55c6c;margin-left: 10px;" icon="el-icon-delete">删除</el-button>
          </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
      <el-col>
      <el-pagination
        background
        layout="sizes,prev, pager, next,total,jumper"
        :page-size="10"
        :total="1000"
        style="padding-top: 1.25rem;float: right;"
        @size-change="handlepagechange"
        @current-change="handlepagechange"
        :prev-text="prevtext"
        :next-text="nexttext"
        :current-page="currentPage"
        >
      </el-pagination>
      </el-col>
</el-row>
<!-- 
  <div>
    <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
    <el-button @click="toggleSelection()">取消选择</el-button>
  </div> -->

</template>

<script>
  export default {
    data() {
		var height = document.documentElement.clientHeight
      return {
		height:height-222,
		currentPage: 1,
        prevtext:"上一页",
        nexttext:"下一页",
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-06',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-08',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        multipleSelection: []
      }
    },

    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
		console.log(val)
        this.multipleSelection = val;
      },handlepagechange(val){
		console.log(val)
	}
    }
  }
</script>

<style>
.el-row{
	padding: 0;
}
i{
    font-weight: 700 !important;
}
</style>
